<template>
    <Modal
        title="修改${aggregate.desc}"
        :width="600"
        :value="showModal"
        :mask-closable="false"
        :footer-hide="true"
        @on-cancel="cancel${aggregate.largeCamelName}ModifyDialog"
    >
        <div style="">
            <Row style="overflow:hidden">
                <i-col style="height:auto;min-height:100%;" span="20">
                    <Form ref="dialogForm" :model="dialog.form" :rules="dialog.rules">
                        <Row>
<#list aggregate.fields as field>
<#if field.required == true>
<#if field.name=='status'>
                            <FormItem :label-width="135" label="状态：" prop="status">
                                <i-switch size="large" :true-value="1" :false-value="0" v-model="dialog.form.status">
                                    <span :slot="1">启用</span>
                                    <span :slot="0">禁用</span>
                                </i-switch>
                            </FormItem>
<#elseif field.name?contains('type')>
							<FormItem :label-width="135" label="${field.desc}:" prop="${field.camelName}">
								<Select placeholder="请选择${field.desc}" v-model="dialog.form.${field.camelName}">
									<Option :value="1" :key="1">类型1</Option>
									<Option :value="2" :key="2">类型2</Option>
									<Option :value="3" :key="3">类型3</Option>
								</Select>
							</FormItem>
<#else>
                            <FormItem :label-width="135" label="${aggregate.desc}名称：" prop="${field.camelName}">
                                <Input autocomplete="off" placeholder="请填写${aggregate.desc}名称"  v-model="dialog.form.${field.camelName}"/>
                            </FormItem>
</#if>
</#if>
</#list>
                        </Row>
                        <Row>
                            <FormItem prop="" label="" :labelWidth="135" class="alg-left">
                                <Button type="primary" :loading="dialog.loading" style="margin-right:10px;" @click="confirm${aggregate.largeCamelName}ModifyDialog">确 定</Button>
                                <Button type="default" @click="cancel${aggregate.largeCamelName}ModifyDialog">取消</Button>
                            </FormItem>
                        </Row>
                    </Form>
                </i-col>
            </Row>
        </div>
    </Modal>
</template>

<script>
    import "./${aggregate.name}_update.less";
    import {
        remote${aggregate.largeCamelName}Modify,
        remote${aggregate.largeCamelName}Query,
    } from '@/api/clean/admin/${domain.system}'
    export default {
        props: ["show"],
        data() {
            return {
                dialog: {
                    loading: false,
                    form: {
<#list aggregate.fields as field>
                        ${field.camelName}: '',
</#list>
                    },
                    rules: {
<#list aggregate.searchFields as field>
<#if field.type=='string'>
                        ${field.camelName}: [
                            { required: true, message: '${field.desc}不能为空', trigger: 'blur' },
                            { type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur' },
                        ],
<#elseif field.name=='status'>
<#else>
                        ${field.camelName}: [
                            { required: true, message: '${field.desc}不能为空', trigger: 'blur' },
                        ],          
</#if>
</#list>
                    },
                },
            };
        },
        computed: {
            showModal() {
                return this.show;
            }
        },
        watch: {
            // 对话框打开关闭时，重置表单
            show(oldV, newV) {
                if (oldV != newV) {
                    this.$refs.dialogForm.resetFields()
                }
            }
        },
        methods: {
            init${aggregate.largeCamelName}Info: function(id){
                remote${aggregate.largeCamelName}Query({id:id}).then(res=>{
                    if (res.code != 10000) {
                        this.$Message.error(res.msg)
                        return
                    }
                    this.dialog.form = {
                        id: res.data.id,
<#list aggregate.fields as field>
<#if field.required?? && field.required==true>
						${field.camelName}: res.data.${field.camelName},
</#if>						
</#list>  
                    }
                })
            },
            // 确认对话框
            confirm${aggregate.largeCamelName}ModifyDialog: function(){
                this.$refs.dialogForm.validate(valid => {
                    if (valid) {
                        this.dialog.loading = true
                        remote${aggregate.largeCamelName}Modify(this.dialog.form).then(res => {
                            this.dialog.loading = false
                            if (res.code != 10000) {
                                this.$Message.error(res.msg)
                                return
                            }
                            this.$Message.success(res.msg)
                            this.cancel${aggregate.largeCamelName}ModifyDialog()
                            this.$emit("parentRefresh${aggregate.largeCamelName}List");
                        })
                    }
                });
            },
            // 关闭对话框
            cancel${aggregate.largeCamelName}ModifyDialog: function() {
                this.$emit("parentCloseModifyDialog");
            },
        }
    };
</script>